<template>
    <el-form :inline="true" :model="from" class="demo-form-inline" label-width="auto">
        <el-form-item label="项目">
            <el-select v-model="from.customerId" placeholder="请选择项目" style="width: 220px">
                <el-option v-for="item in customerNames" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="护理项目">
            <el-select v-model="from.itemId" placeholder="请选择护理项目" style="width: 220px">
                <el-option v-for="item in nursingNames" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <div class="block">
            <span class="demonstration">护理时间</span>
            <el-date-picker v-model="from.nursingTime" type="datetime" placeholder=from.nursingTime />
        </div>
        <el-form-item label="护理内容">
            <el-input v-model="from.nursingContent" placeholder="请输入护理内容" style="width: 220px" />
        </el-form-item>
        <el-form-item label="护理次数">
            <el-input v-model="from.nursingCount" placeholder="请输入护理次数" style="width: 220px" />
        </el-form-item>
        <el-form-item label="护理人员">
            <el-select v-model="from.userId"  placeholder="请选择护理人员" style="width: 220px">
                <el-option v-for="item in userNames" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancleEdit">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup name="edit">
import { ref, reactive } from "vue";
import { saveOrUpdateRecord, getRecordById, getCustomerName, getNurseItem, getUserItem, } from '@/api/CareManagement/careRecord/index';
import { ElMessageBox, ElNotification } from "element-plus";
import { onMounted } from "vue";

const props = defineProps({
    closeEdit: {
        type: Function,
        required: true
    },
    editId: {
        type: Number,
        required: true
    }
});

// 修改：确保 from 初始化字段完整，避免 undefined 错误
const from = reactive({
    id: null,
    customerId: null,
    itemId: null,
    nursingTime: "",
    nursingContent: "",
    nursingCount: null,
    userId: null,
    customerName: "",
    nursingName: "",
    nickName: ""
});

const customerNames = ref([]);
const nursingNames = ref([]);
const userNames = ref([]);

const cancleEdit = () => {
    props.closeEdit(false);
};

const onSubmit = () => {
    saveOrUpdateRecord(from).then(res => {
        ElNotification({
            title: "提示",
            type: "success",
            message: "保存成功"
        });
        props.closeEdit(true);
    });
};

const pageGetById = async () => {
    try {
        const user = await getRecordById(props.editId);
        const data = await getCustomerName();
        const data1 = await getNurseItem();
        const data2 = await getUserItem();

        // 修改：增加对 user 数据的校验
        if (user && typeof user === "object") {
            Object.assign(from, user); // 确保 user 数据正确映射到 from
        } else {
            console.warn("获取的用户数据无效:", user);
        }

        customerNames.value = data.map(item => ({
            value: item.customerId,
            label: item.customerName
        }));
        nursingNames.value = data1.map(item => ({
            value: item.id,
            label: item.nursingName
        }));
        userNames.value = data2.map(item => ({
            value: item.id,
            label: item.nickname
        }));
    } catch (error) {
        console.error("获取数据失败:", error);
    }
};

onMounted(() => {
    if (props.editId) {
        pageGetById();
    }
});
</script>
<style scoped>
.demo-form-inline {

    padding: 15px 5px;
}

.block {
    margin-top: 12px;
    /* 保留：为日期选择器添加外边距 */
}

.el-form-item {
    margin-bottom: 22px;
    /* 新增：增加表单项之间的垂直间距 */
}

.bottoms {
    /* 新增：使用弹性布局 */
    justify-content: flex-end;
    /* 新增：内容靠右对齐 */
    margin-top: 22px;
}
</style>